import React, { memo, useEffect, useState } from "react";
import { GoodsOrderInfoWrapper } from "./style";
import { getGoodsDetail } from "@/service/shop";
import { Row, Col, InputNumber, Button, Input } from "antd";
const { TextArea } = Input;
export default memo(function OrderInfo(props) {
  const [detail, setdetail] = useState({});
  const [buyNumber, setbuyNumber] = useState(1);
  const { goodsId } = props;
  const getDetail = async (id) => {
    const res = await getGoodsDetail(id);
    console.log(res);
    setdetail(res.data.basicInfo);
  };
  useEffect(() => {
    getDetail(goodsId);
  }, []);

  const InputChange = (value) => {
    setbuyNumber(value);
  };
  return (
    <GoodsOrderInfoWrapper>
      <div className="title">订单信息</div>
      {detail.hasOwnProperty("minPrice") ? (
        <div className="main-content">
          <Row className="basic-row">
            <Col span={2}>
              <img src={detail.pic} alt="" />
            </Col>
            <Col span={6}>
              <div className="name">{detail.name}</div>
            </Col>
            <Col span={6}>
              <div className="unit">单位:{detail.unit}</div>
            </Col>
            <Col span={2}>{detail.minPrice.toFixed(2)}</Col>
            <Col span={4}>
              <InputNumber
                min={1}
                max={10}
                defaultValue={1}
                onChange={InputChange}
              />
            </Col>
            <Col className="totalPrice" span={3}>
              {(detail.minPrice * buyNumber).toFixed(2)}
            </Col>
          </Row>
          <Row className="comment-row">
            <Col span={2}></Col>
            <Col span={10}>
              <div className="comment">
                <span className="comment-title">给卖家留言：</span>
                <TextArea
                  className="TextArea"
                  showCount
                  placeholder="选填，请先和商家协商一致，付款后商家可见"
                  rows={2}
                />
              </div>
            </Col>

            <Col span={12}>
              <div className="price-info">
                <div className="total">
                  店铺合计:
                  <span> ¥ {(detail.minPrice * buyNumber).toFixed(2)}</span>
                </div>
              </div>
            </Col>
          </Row>
          <Row>
            <Col span={16}></Col>
            <Col span={8}>
              <div className="current-price-info">
                <div className="total">
                  实付款:
                  <span> ¥ {(detail.minPrice * buyNumber).toFixed(2)}</span>
                </div>
                <div className="submin-wrap">
                  <Button size="large" className="submin-btn">
                    提交订单
                  </Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      ) : (
        ""
      )}
    </GoodsOrderInfoWrapper>
  );
});
